<template>
  <div>
    <van-search @click="$router.push('/search')"  placeholder="请输入搜索关键词" />
    <ul class="nav">
      <li>综合推荐</li>
      <li>销量</li>
      <li>价格</li>
      <li>好评度</li>
      <li>筛选</li>
    </ul>
    <v-list :list="list"></v-list>
  </div>
</template>

<script>
import { reqTolist } from "../../http/http";
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    //请求数据 获去 id
    console.log(this.$route.query.id);
    reqTolist({
      cateid: this.$route.query.id,
      type: this.$router.query.type,
    }).then((res) => {
      this.list = res.data.list.goodData ? res.data.list.goodData : [];
    });
  },
  activated() {
    if (this.oldid === this.$route.query.id) {
      //上一次和这一次的值一样
      return;
    }

    //两次id不一样，先清空数据
    this.list = [];

    //将本次请求的id存起来
    this.oldid = this.$route.query.id;

    //发请求
    reqTolist({
      cateid: this.$route.query.id,
      type: this.$route.query.type
    }).then((res) => {
      console.log("=============数据回来了=================");
      console.log(res);
      //后端没有数据会返回null,但是我们希望是个数组，为了后期判断 “暂无数据”还是展示数据
      this.list = res.data.list.goodData ? res.data.list.goodData : [];
    });
  },
};
</script>

<style lang="less" scoped>
@import "../../less/index.less";
.van-search{
  background:@primary;
}
.nav{
  line-height: @header-nav;
  height: @header-nav;
  text-align: center;
  display: flex;
  color: @while;
  background: @primary;
}
.nav li{
flex: 1;
}
</style>>

